<template>
  <section class='f-phone-recharge-flow'>
    <div v-html="form.rechargeProcess"></div>
    <p v-if="!form.rechargeProcess" class="f-center f-mt-30">暂无充值流程</p>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'

export default {
  setup(props, context) {
    const store = useStore()
    const router = useRouter()

    const route = useRoute();

    const state = reactive({
      form: {},
      shopId: "",
      type: "",
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '充值流程',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightText: '',
      });

      state.shopId = route.query.shopId
      state.type = route.query.type
      if (state.type == 1) {
        getShopInfo()
      } else {
        getGuideInfo(state.shopId)
      }
    })


    const getShopInfo = () => {
      api.shopInfo().then(res => {
        state.form = res.data
      })
    }

    const getGuideInfo = (shopId) => {
      let json = {
        shopId
      }
      api.shopGuideInfo(json).then(res => {
        state.form = res.data
      })
    }

    return {
      ...toRefs(state)
    }
  }
}
</script>
<style lang='scss'>
.f-phone-recharge-flow {
  img {
    max-width: 100% !important;
  }
}
</style>